<template>
  <section>
    <div class="push1">
      <!--      双创要闻-->
      <div style="padding-right: 100px">
        <img class="image-notice" src="../../assets/img/tubiao_13.png" alt="">
        <span class="push-header">双创要闻</span>
        <el-button style="float: right;margin-top: 21px" @click="jumpNewsLists" type="success" round>more</el-button>
      </div>
      <el-table :data="newsList" style="width: 100%;cursor: pointer" :cell-style="{padding:'0'}"
                :row-style="{height: '40px'}"
                @row-click="jumpNewsDetail"
                :show-header=false>
        <el-table-column prop="newsTittle" label="Name" width="480" :show-overflow-tooltip="true"/>
        <el-table-column prop="newsPublishTime" label="Date" width="180" />

      </el-table>
      <!--      下载专区-->
      <div style="padding-right: 100px">
        <img class="image-notice" src="../../assets/img/tubiao_11.png" alt="">
        <span class="push-header">下载专区</span>
        <el-button style="float: right;margin-top: 21px" @click="jumpDownloadLists" type="success"  round>more</el-button>
      </div>
      <el-table :data="newsList" style="width: 100%" :cell-style="{padding:'0'}"
                :row-style="{height: '40px'}"
                @row-click="jumpDownloadDetail"
                :show-header=false>
        <el-table-column prop="fileName" label="Name" width="480" :show-overflow-tooltip="true"/>
        <el-table-column prop="submitTime" label="Date" width="180" />
      </el-table>
    </div>
    <div class="push1">
      <!--      通知公告-->
      <div style="padding-right: 100px">
        <img class="image-notice" src="@/assets/img/tubiao_13.png" alt="">
        <span class="push-header">通知公告</span>
        <el-button style="float: right;margin-top: 21px" @click="jumpNoticeLists" type="success" round>more</el-button>
      </div>
      <el-table :data="noticeList" style="width: 100%;cursor:pointer;" :cell-style="{padding:'0'}"
                :row-style="{height: '40px'}"
                @row-click="jumpNoticeDetail"
                :show-header=false>
        <el-table-column prop="noticeTittle" label="Name" width="480" :show-overflow-tooltip="true"/>
        <el-table-column prop="noticePublishTime" label="Date" width="180" />
      </el-table>
      <!--      竞赛活动-->
      <div style="padding-right: 100px">
        <img class="image-notice" src="@/assets/img/tubiao_21.png" alt="">
        <span class="push-header">竞赛活动</span>
        <el-button style="float: right;margin-top: 21px" type="success" round>more</el-button>
      </div>
      <el-table :data="newsList" style="width: 100%" :cell-style="{padding:'0'}"
                :row-style="{height: '40px'}"
                :show-header=false>
        <el-table-column prop="noticeTittle" label="Name" width="480" :show-overflow-tooltip="true"/>
        <el-table-column prop="noticePublishTime" label="Date" width="180" />
      </el-table>
    </div>
    <div>
      <!--    双创之星-->
      <div style="padding-right: 100px">
        <img class="image-notice" src="@/assets/img/tubiao_25.png" alt="">
        <span class="push-header">双创之星</span>
        <el-button style="float: right;margin-top: 21px" @click="jumpStarLists(1, 3)" type="success" round>more</el-button>
      </div>
      <table>
        <td v-for="star in starList" class="image-star">
          <img :src="getStarPhoto(star)" @click="jumpStarDetail(star)" :title="getStarBriefDesc(star)" style="width: 100%;height: 100%;cursor:pointer;">
        </td>
      </table>
    </div>
  </section>
</template>

<script lang="js">
import {onMounted, ref} from "vue"
import {useRouter} from "vue-router"
import {getAllNoticesByPage} from '@/api/notice'
import {getAllNewsByPage} from '@/api/news'
import {getAllFilesByPage} from "@/api/file"
import {getAllStarsByPage} from "@/api/star.js"
import axios from "axios";

export default {
  name: "the-push",
  mounted() {
  },
  setup(){
    //方便路由跳转使用
    let router = useRouter()
    //list1是从后端获取的通知公告内容
    const noticeList = ref()
    //list2是从后端获取的双创要闻的内容
    const newsList = ref()
    //list2是从后端获取的双创要闻的内容
    const noticeFileList = ref()
    const starList = ref()
    onMounted( () => {
      //使用api封装好的请求


      getAllNoticesByPage(1,3).then((response)=>{
        const data = response.data.data.list
        noticeList.value = data
      })

      getAllNewsByPage(1,3).then((response)=>{
        const data = response.data.data.list
        newsList.value = data
      })
      getAllFilesByPage(1,3).then((response)=>{
        const data = response.data.data.list
        noticeFileList.value = data
      })
      getAllStarsByPage(1, 3).then((response)=>{
        const data = response.data.data.list
        starList.value = data
      })
    })


    function jumpNoticeDetail(row){
      router.push({path:'/noticesDetail',query:{
         id:row.noticeId
        }})
    }
    function jumpNoticeLists(){
      router.push({path:'/noticesLists'})
    }
    function jumpNewsDetail(row){
      router.push({path:'/newsDetail',query:{
          id:row.newsId
        }})
    }
    function jumpNewsLists(){
      router.push({path:'/newsLists'})
    }
    function jumpDownloadDetail(row){
      router.push({path:'/downloadDetail',query:{
          id:row.fileId
        }})
    }
    function jumpDownloadLists(){
      router.push({path:'/downloadLists'})
    }
    function jumpStarDetail(row) {
      router.push({path:'/starDetail', query:{
          id:row.starId
        }})
    }
    function jumpStarLists(pageNum, pageSize) {
      router.push({
        path: '/starList', query: {
          loc: pageNum, s: pageSize
        }
      })
    }
    function getStarPhoto(row) {
      return row.starPhoto
    }
    function getStarBriefDesc(row) {
      let briefDesc = "";
      briefDesc = row.starName + ", " + row.starCollege;
      return briefDesc;
    }
    return{
      noticeList,
      newsList,
      noticeFileList,
      starList,
      jumpNoticeDetail,
      jumpNoticeLists,
      jumpNewsDetail,
      jumpNewsLists,
      jumpDownloadDetail,
      jumpDownloadLists,
      jumpStarDetail,
      jumpStarLists,
      getStarPhoto,
      getStarBriefDesc
    }
  }
}
</script>

<style scoped lang="less">
.push1{
  display:inline-block;
  width:50%;
}
.push-ul{
  list-style: none;
  padding-left: 5px;
  padding-right: 100px;
  margin-top: 0px;
  margin-bottom: 0px
}
.image-notice {
  justify-content: right;
  width: 35px;
  height: 35px;
  margin-top: 21px;
}
.push{
  line-height: 38px;
  border-bottom: 1px dashed #e8e8ea;
  color: #546a7b;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}
.push-header{
  position: relative;
  bottom: 10px;
  color: #485661;
  font-size: 22px;
}
//双创之星
//  .image-star li{
//    padding-left: 0px;
//    height: auto;
//    display: inline-block;
//  //float: left;
//    cursor: pointer;
//    margin-right: 10px;
//  }
.image-star{
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  display: inline-block;
  height: 213px;

}
</style>
